<template>
  <view class="box">
    <view class="header">
      <view>权益中心</view>
      <view class="card">
        <router-link to="/bank">
          <view @click="handleToMoney" class="btn">立即开通</view>
        </router-link>
      </view>
    </view>
    <view class="items">
      <view class="title">
        <view class="txt1">会员权益</view>
        <view class="txt2">全部16项特权></view>
      </view>
      <view class="list">
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/1.png')" alt="" />
          </view>
          <view class="desc">视频会员5折起</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit"  :src="require('@/static/image/interests/2.png')" alt="" />
          </view>
          <view class="desc">会员包邮</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/3.png')" alt="" />
          </view>
          <view class="desc">淘宝天猫1折起</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/4.png')" alt="" />
          </view>
          <view class="desc">加油7折起</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/5.png')" alt="" />
          </view>
          <div class="desc">外卖天天领红包</div>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/6.png')" alt="" />
          </view>
          <view class="desc">打车5折起</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/7.png')" alt="" />
          </view>
          <view class="desc">星巴克8折起</view>
        </view>
        <view class="item">
          <view class="img">
            <image mode="aspectFit" :src="require('@/static/image/interests/8.png')" alt="" />
          </view>
          <view class="desc">查看</view>
        </view>
      </view>
    </view>
    <image class="footer" mode="aspectFit" :src="require('@/static/image/interests/footer.png')" alt="" />
    <login  v-if="login"></login>
  </view>
</template>

<script>
import login from "@/pages/index/login";
import {mapState} from 'vuex'
import {getToken} from "@/cookie";
import {handleToAttest} from "@/utils";
export default {
  name: 'Interests',
  components:{
    login
  },
  data() {
    return {
      value:140000,
      type:1.06,
      interest:8400
    }
  },
  computed:{
    ...mapState({
      login:'showLogin'
    })
  },
  methods: {
    sliderChange(res){
      this.interest = Math.ceil(res.detail.value * this.type - res.detail.value)
      this.value = res.detail.value
    },
    handleChangeType(res){
      this.type = res
      this.interest = Math.ceil(this.value * this.type - this.value)
    },

    handleToMoney(){
      if( this.$store.getters.getToken ){
        handleToAttest()
      }else{
        this.$store.dispatch('handleChangeLogin',true)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 500upx;
  background: url("~@/static/image/interests/h-bg.png") no-repeat 0/100% 100%;

  nav {
    display: block;
    width: 100%;
    height: 20upx;
    line-height: 20upx;
    text-align: center;
    color: #fff;
  }

  .card {
    position: relative;
    width: 80vw;
    height: 340upx;
    margin: 150upx auto 0;
    background: url("~@/static/image/interests/card.png") no-repeat 0/100% 100%;

    .btn {
      position: absolute;
      right: 10px;
      bottom: 60upx;
      width: 170upx;
      height: 60upx;
      line-height: 60upx;
      display: flex;
      justify-content: center;

      font-size: 24upx;
      background: linear-gradient(to right, #987a53, #54350a);
      border-radius: 5px;
      color: #fff;
    }
  }
}

.items {
  width: 95vw;
  margin: 20upx auto 0;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30upx;

    .txt1 {
      color: #333333;
      font-size: 20upx;
      font-weight: bold;
    }

    .txt2 {
      color: #999999;
      font-size: 14upx;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      width: 23.75vw;
      height: 23.75vw;
      margin-bottom: 40upx;
      .img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 130upx;
        height: 130upx;
        margin: 0 auto;
        border-radius: 10px;
        background: linear-gradient(45deg, #fedebe, #f5c485);
        image{
          width: 80upx;
        }
      }

      .desc {
        text-align: center;
        color: #666;
        font-size: 14upx;
        margin-top: 16upx;
      }
    }
  }
}

.footer {
  display: flex;
  width: 95vw;
  margin: -100upx auto 0;
}
</style>
